.slider-3d-css {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  .stage-whole {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
  }
  .stage-whole, .state-cover, .stage-pic {
    perspective: 2000px;
    perspective-origin: 40% 60%;
  }
  .container-whole, .container-cover, .container-pic {
    transform-style: preserve-3d;
  }
  // 各种3d效果往.container-whole, .container-cover, .container-pic上加就好了
  .container-whole {
    animation: 8s rotateY linear 300ms infinite;
    &:hover {
      animation-play-state: paused;
    }
  }
  .stage-cover {
    position: absolute;
    top: 0;
    left: 0;
    &:nth-of-type(1) {
      transform: translate(-50%, -50%) rotateY(0deg) translateZ(200px);
    }
    &:nth-of-type(2) {
      transform: translate(-50%, -50%) rotateY(90deg) translateZ(200px);
    }
    &:nth-of-type(3) {
      transform: translate(-50%, -50%) rotateY(180deg) translateZ(200px);
    }
    &:nth-of-type(4) {
      transform: translate(-50%, -50%) rotateY(270deg) translateZ(200px);
    }
    &:nth-of-type(5) {
      transform: translate(-50%, -50%) rotateX(90deg) translateZ(200px);
    }
    &:nth-of-type(6) {
      transform: translate(-50%, -50%) rotateX(270deg) translateZ(200px);
    }
  }
  .container-cover {
    position: relative;
    width: 400px;
    height: 400px;
    overflow: hidden;
  }
  .stage-pic {
    position: absolute;
    width: 44%;
    height: 44%;
    transform: translate(-50%, -50%);
    &:nth-of-type(1) {
      left: 26%;
      top: 26%;
    }
    &:nth-of-type(2) {
      left: 74%;
      top: 26%;
    }
    &:nth-of-type(3) {
      left: 26%;
      top: 74%;
    }
    &:nth-of-type(4) {
      left: 74%;
      top: 74%;
    }
  }
  .container-pic {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .img {
      display: block;
      width: 100%;
      height: 100%;
      transition: 300ms all linear 0ms;
      &:hover {
        transform: scale(3);
      }
    }
  }
}
@keyframes rotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
